<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="800px"
      @closed="resetForm('form')"
      :close-on-click-modal="false"
    >
      <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="120px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="校区名称" prop="schoolCode">
                <SchoolSelect
                  v-if="dialogVisible"
                  type="2"
                  :defaultCode="form.schoolCode"
                  @emit="setScool"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学期名称" prop="semesterCode">
                <el-select
                  v-model="form.semesterCode"
                  filterable
                  placeholder="请选择学期名称"
                >
                  <el-option
                    v-for="v in semesterData"
                    :key="v.id"
                    :label="v.name"
                    :value="v.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="培训类型" prop="trainingCode">
                <el-select
                  v-model="form.trainingCode"
                  filterable
                  placeholder="请选择培训类型"
                >
                  <el-option
                    v-for="v in trainingData"
                    :key="v.id"
                    :label="v.name"
                    :value="v.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="年级名称" prop="gradeCode">
                <el-select
                  v-model="form.gradeCode"
                  filterable
                  placeholder="请选择年级名称"
                >
                  <el-option
                    v-for="v in gradeData"
                    :key="v.id"
                    :label="v.name"
                    :value="v.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="专业方向" prop="directionCode">
                <el-cascader
                  v-model="form.directionCode"
                  :options="majorData"
                  :props="{
                    expandTrigger: 'hover',
                    children: 'childList',
                    label: 'name',
                    value: 'code',
                  }"
                  @change="handleMajor"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="班级名称" prop="classCode">
                <el-select
                  v-model="form.classCode"
                  filterable
                  placeholder="请选择班级名称"
                >
                  <el-option
                    v-for="v in classData"
                    :key="v.id"
                    :label="v.name"
                    :value="v.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="主讲教师" prop="teacherName">
            <el-input v-model.trim="form.teacherName"></el-input>
          </el-form-item>
          <el-form-item label="固定教室" prop="classAddr">
            <el-input v-model.trim="form.classAddr"></el-input>
          </el-form-item>
          <el-form-item label="班级人数" prop="studentNum">
            <el-input v-model.trim="form.studentNum"></el-input>
          </el-form-item>

          <el-form-item label="学员队别编码" prop="studentTeamCode">
            <el-input v-model.trim="form.studentTeamCode"></el-input>
          </el-form-item>

          <el-form-item label="学员队别名称" prop="studentTeamName">
            <el-input v-model.trim="form.studentTeamName"></el-input>
          </el-form-item>

          <el-form-item label="是否结课">
            <el-radio-group v-model="form.isGraduate">
              <el-radio label="2">未结课</el-radio>
              <el-radio label="1">已结课</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="custom" v-preventReClick @click="submitForm('form')"
          >提 交</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  eduTeachingAdd,
  eduTeachingUpdate,
} from '@/api/admin/teach/eduTeaching.js'
import { eduTierQuery } from '@/api/admin/teach/eduTier.js'
import { eduMajorsQuery } from '@/api/admin/teach/eduMajors.js'
import { sysTrainingLevelQuery } from '@/api/admin/system/sysTrainingLevel'
import { tbDeptQuery } from '@/api/admin/system/unitManage.js'
import Bus from '@/utils/bus.js'
import { cloneDeep } from 'lodash'
export default {
  components: {
    SchoolSelect: () => import('@/components/dataSelect/schoolSelect'),
  },
  data() {
    return {
      title: '新增',
      dialogVisible: false,
      addOrEdit: 1,
      checkedData: {},
      form: {
        classCode: '', //班级编码
        className: '', //班级名称
        classAddr: '', //固定教室
        directionName: '', //方向名称
        directionCode: '', //方向编码
        gradeCode: '', //年级编码
        gradeName: '', //年级名称
        isGraduate: '2', //是否已毕业：1是，2否
        majorsCode: '', //专业编码
        majorsName: '', //专业名称
        schoolCode: '', //校区编码
        schoolName: '', //校区名称
        semesterCode: '', //学期编码
        semesterName: '', //学期名称
        studentNum: '', //人数
        studentTeamCode: '', //学员队别编码
        studentTeamName: '', //学员队别名称
        teacherCode: this.$store.getters.account, //教员编码
        teacherName: this.$store.getters.username, //教员姓名
        trainingCode: '', //培训类型编码
        trainingName: '', //培训类型名称
      },
      rules: {
        teacherName: [
          { required: true, message: '请输入教员名称', trigger: 'blur' },
        ],
        classCode: [{ required: true, message: '请选择班级', trigger: 'blur' }],
        directionCode: [
          { required: true, message: '请选择专业方向', trigger: 'blur' },
        ],
        gradeCode: [{ required: true, message: '请选择年级', trigger: 'blur' }],
        schoolCode: [
          { required: true, message: '请选择校区', trigger: 'blur' },
        ],
        semesterCode: [
          { required: true, message: '请选择学期', trigger: 'blur' },
        ],
        trainingCode: [
          { required: true, message: '请选择培训类型', trigger: 'blur' },
        ],
      },
      classData: [], //班级
      gradeData: [], //年级
      semesterData: [], //学期
      majorData: [], //专业方向
      trainingData: [], //培训类型
      schoolData: [], //培训类型
    }
  },
  props: ['type'],
  mounted() {
    Bus.$on('showDialogTeachingClassAdd', (v) => {
      if (v) {
        this.checkedData = v
        this.handleAddOrEdit(2)
      } else {
        this.handleAddOrEdit(1)
      }
    })
    this.getClass()
    this.getMajor()
    this.getTraining()
    this.getSchool()
  },
  beforeDestroy() {
    Bus.$off('showDialogTeachingClassAdd')
  },
  methods: {
    //班级、年级、学期
    getClass() {
      eduTierQuery({ page: 1, limit: 999 }).then((res) => {
        let data = res.data.data
        this.semesterData = data.filter((v) => v.type == 1)
        this.gradeData = data.filter((v) => v.type == 2)
        this.classData = data.filter((v) => v.type == 3)
      })
    },
    //专业、方向
    getMajor() {
      eduMajorsQuery({ pid: 0, page: 1, limit: 999 }).then((res) => {
        this.majorData = res.data.data
        this.majorData.forEach((v) => {
          if (v.childList.length == 0) {
            delete v.childList
          } else {
            v.childList.forEach((m) => {
              delete m.childList
            })
          }
        })
      })
    },
    handleMajor(v) {
      if (v.length != 2) return
      this.form.majorsCode = v[0]
      this.form.directionCode = v[1]
      let res = this.majorData.find((item) => item.code == v[0])
      if (!res) return
      this.form.majorsName = res.name
      if (res.childList && res.childList.length) {
        this.form.directionName = res.childList.find(
          (item) => item.code == v[1],
        ).name
      }
    },
    //培训类型
    getTraining() {
      let obj = {
        page: 1,
        limit: 999,
      }
      sysTrainingLevelQuery(obj).then((res) => {
        this.trainingData = res.data.data
      })
    },
    //校区
    getSchool() {
      tbDeptQuery({ pId: '0' }).then((res) => {
        let { data } = res.data
        this.schoolData = data.length
          ? data[0].childList.filter((v) => v.type == 1)
          : []
      })
    },
    //显示弹窗
    handleAddOrEdit(type) {
      if (type == 2) {
        this.title = '编辑'
        for (let i in this.checkedData) {
          if (this.form.hasOwnProperty(i)) {
            this.form[i] = this.checkedData[i] || ''
          }
        }
        this.form.id = this.checkedData.id
      } else {
        this.title = '新增'
        delete this.form.id
      }
      this.addOrEdit = type
      this.dialogVisible = true
    },
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.addOrEdit == 1 ? this.add() : this.edit()
        }
      })
    },
    //新增
    add() {
      eduTeachingAdd(this.form).then((res) => {
        this.dialogVisible = false
        Bus.$emit('refreshTeachingClassList')
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
    //编辑
    edit() {
      eduTeachingUpdate(this.form).then((res) => {
        this.dialogVisible = false
        Bus.$emit('refreshTeachingClassList')
        this.$message({
          message: '操作成功',
          type: 'success',
        })
      })
    },
    setScool(v) {
      this.form.schoolCode = v.code
    },
    //重置表单
    resetForm(form) {
      this.$refs[form].resetFields()
      for (let key in this.form) {
        if (key != 'teacherCode') this.form[key] = ''
      }
      this.form.isGraduate = '2'
      this.form.teacherCode = this.$store.getters.account
      this.form.teacherName = this.$store.getters.username
    },
  },
}
</script>